<template> 
	<view> 
		<view class="page" style="position: relative;"> 
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common> 
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header> 
			<view class="body after-navber"> 
				<view style="display: flex;flex-direction: column;height:100%;width: 100%;"> 
					<view style="flex-grow: 0;"> 
						<form> 
							<view class="search-box"> 
								<view class="input-box"> 
									<view @tap="pullDown" class="flex-row pull-down"> 
										<view class="cat">{{data.default_cat.name}}</view> 
										<view style="font-size: 0"> 
											<image class="search-icon" :src="data.__wxapp_img.search.s_up.url"></image> 
										</view> 
										<view class="pull-down-list" v-if="data.is_show"> 
											<view @tap="change_cat" :class="['pull-down-text flex-x-center', item.is_active?'active':'']" :data-id="item.id" 
											 v-for="(item,index) in data.cats" :key="item.id">{{item.name}}</view> 
										</view> 
									</view> 
									<view style="width: 75%"> 
										<input autoFocus="true" @blur="inputBlur" @confirm="inputConfirm" @focus="inputFocus" class="search-input" 
										 confirmType="search" style="width: 100%"></input> 
									</view> 
								</view> 
								<view> 
									<view @tap="searchCancel" class="search-cancel">取消</view> 
								</view> 
							</view> 
						</form> 
					</view> 
					<view style="flex-grow: 3;position: relative"> 
						<view class="search-history" v-if="data.show_history&&data.history_list&&data.history_list.length>0"> 
							<view> 
								<text class="search-history-title">搜索历史</text> 
								<view @tap="deleteSearchHistory" class="delete-search-history"> 
									<image :src="data.__wxapp_img.dapp.delete.url" style="width: 28upx;height: 34upx"></image> 
								</view> 
							</view> 
							<view class="search-history-list"> 
								<view @tap="historyClick" class="search-history-item" :data-value="item.keyword" v-for="(item,index) in data.history_list" 
								 :key="item.id">{{item.keyword}}</view> 
							</view> 
						</view> 
						<block v-if="data.show_result"> 
							<view class="search-result" v-if="data.is_search"> 
								<view class="goods-list" style="padding-top: 20upx"> 
									<navigator class="goods-item" openType="navigate" :url="item.url" v-for="(item,index) in data.goods_list" 
									 :key="item.id"> 
										<image class="goods-pic" mode="aspectFill" :src="item.pic_url"></image> 
										<view class="goods-info"> 
											<text class="goods-name">{{item.name}}</text> 
											<text class="goods-price">￥{{item.price}}</text> 
										</view> 
									</navigator> 
								</view> 
								<view :class="['loading-more-bar',data.loading_more_active]"> 
									<image :src="data.__wxapp_img.system.loading_black.url" style="width: 48upx;height: 48upx"></image> 
								</view> 
							</view> 
							<view class="search-result" v-else> 
								<view class="flex-row flex-x-center" style="padding:36upx 0;"> 
									<view class="flex-row flex-y-center"> 
										<view class="flex-grow-0" style="width:100upx;height:100upx;margin-right:40upx;"> 
											<image :src="data.__wxapp_img.search.search_no.url" style="width:100upx;height:100upx;"></image> 
										</view> 
										<view class="flex-grow-1" style="color:#353535;">抱歉，没有相关商品</view> 
									</view> 
								</view> 
							</view> 
						</block> 
					</view> 
				</view> 
			</view> 
			<comp-footer v-bind="{data:data}"></comp-footer> 
		</view> 
 
	</view> 
</template> 
 
<script>var myVue = {}; 
	export default { 
		data() { 
			return { 
				data: { 
					load_more_count: 0, 
					last_load_more_time: 0, 
					is_loading: !1, 
					loading_class: "", 
					cat_id: !1, 
					keyword: !1, 
					page: 1, 
					limit: 20, 
					pageCount: 0, 
					goods_list: [], 
					show_history: !0, 
					show_result: !1, 
					history_list: [], 
					is_search: !0, 
					is_show: !1, 
					cats: [], 
					default_cat: [] 
				} 
			}; 
		}, 
		onLoad: function(t) {myVue = this; 
			myVue.getApp.page.onLoad(this, t), this.cats(); 
		}, 
		onReady: function(t) { 
			myVue.getApp.page.onReady(this); 
		}, 
		onShow: function(t) { 
			myVue.getApp.page.onShow(this); 
			var a = this; 
			a.setData({ 
				history_list: a.getHistoryList(!0) 
			}); 
		}, 
		onReachBottom: function() { 
			myVue.getApp.page.onReachBottom(this); 
			var t = this, 
				a = t.data.page + 1; 
			a <= t.data.pageCount && (t.setData({ 
				page: a 
			}), t.getGoodsList()); 
		}, 
		methods: { 
			cats: function() { 
				var t = this; 
				myVue.getApp.request({ 
					url: myVue.getApp.api.default.cats, 
					success: function(a) { 
						0 == a.code && t.setData({ 
							cats: a.data.list, 
							default_cat: a.data.default_cat 
						}); 
					} 
				}); 
			}, 
			change_cat: function(t) { 
				var a = this, 
					e = a.data.cats, 
					s = t.currentTarget.dataset.id; 
				for (var i in e) 
					if (s === e[i].id) var o = { 
						id: e[i].id, 
						name: e[i].name, 
						key: e[i].key, 
						url: e[i].url 
					}; 
				a.setData({ 
					default_cat: o 
				}); 
			}, 
			pullDown: function() { 
				var t = this, 
					a = t.data.cats, 
					e = t.data.default_cat; 
				for (var s in a) a[s].id === e.id ? a[s].is_active = !0 : a[s].is_active = !1; 
				t.setData({ 
					is_show: !t.data.is_show, 
					cats: a 
				}); 
			}, 
			inputFocus: function() { 
				this.setData({ 
					show_history: !0, 
					show_result: !1 
				}); 
			}, 
			inputBlur: function() { 
				var t = this; 
				t.data.goods_list.length > 0 && setTimeout(function() { 
					t.setData({ 
						show_history: !1, 
						show_result: !0 
					}); 
				}, 300); 
			}, 
			inputConfirm: function(t) { 
				var a = this, 
					e = t.detail.value; 
				0 != e.length && (a.setData({ 
					page: 1, 
					keyword: e, 
					goods_list: [] 
				}), a.setHistory(e), a.getGoodsList()); 
			}, 
			searchCancel: function() { 
				myVue.getApp.core.navigateBack({ 
					delta: 1 
				}); 
			}, 
			historyClick: function(t) { 
				var a = this, 
					e = t.currentTarget.dataset.value; 
				0 != e.length && (a.setData({ 
					page: 1, 
					keyword: e, 
					goods_list: [] 
				}), a.getGoodsList()); 
			}, 
			getGoodsList: function() { 
				var t = this; 
				t.setData({ 
					show_history: !1, 
					show_result: !0, 
					is_search: !0 
				}); 
				var a = {}; 
				t.data.cat_id && (a.cat_id = t.data.cat_id, t.setActiveCat(a.cat_id)), t.data.keyword && (a.keyword = t.data.keyword), 
					a.defaultCat = JSON.stringify(t.data.default_cat), a.page = t.data.page, t.showLoadingBar(), 
					t.is_loading = !0, myVue.getApp.request({ 
						url: myVue.getApp.api.default.search, 
						data: a, 
						success: function(a) { 
							if (0 == a.code) { 
								var e = t.data.goods_list.concat(a.data.list); 
								t.setData({ 
									goods_list: e, 
									pageCount: a.data.page_count 
								}), 0 == a.data.list.length ? t.setData({ 
									is_search: !1 
								}) : t.setData({ 
									is_search: !0 
								}); 
							} 
							a.code; 
						}, 
						complete: function() { 
							t.hideLoadingBar(), t.is_loading = !1; 
						} 
					}); 
			}, 
			getHistoryList: function(t) { 
				t = t || !1; 
				var a = myVue.getApp.core.getStorageSync(myVue.getApp.const.SEARCH_HISTORY_LIST); 
				if (!a) return []; 
				if (!t) return a; 
				for (var e = [], s = a.length - 1; s >= 0; s--) e.push(a[s]); 
				return e; 
			}, 
			setHistory: function(t) { 
				var a = this.getHistoryList(); 
				a.push({ 
					keyword: t 
				}); 
				for (var e in a) { 
					if (a.length <= 20) break; 
					a.splice(e, 1); 
				} 
				myVue.getApp.core.setStorageSync(myVue.getApp.const.SEARCH_HISTORY_LIST, a); 
			}, 
			getMoreGoodsList: function() { 
				var t = this, 
					a = {}; 
				t.data.cat_id && (a.cat_id = t.data.cat_id, t.setActiveCat(a.cat_id)), t.data.keyword && (a.keyword = t.data.keyword), 
					a.page = t.data.page || 1, t.showLoadingMoreBar(), t.setData({ 
						is_loading: !0 
					}), t.setData({ 
						load_more_count: t.data.load_more_count + 1 
					}), a.page = t.data.page + 1, a.defaultCat = t.data.default_cat, t.setData({ 
						page: a.page 
					}), a.defaultCat = JSON.stringify(t.data.default_cat), myVue.getApp.request({ 
						url: myVue.getApp.api.default.search, 
						data: a, 
						success: function(e) { 
							if (0 == e.code) { 
								var s = t.data.goods_list; 
								if (e.data.list.length > 0) { 
									for (var i in e.data.list) s.push(e.data.list[i]); 
									t.setData({ 
										goods_list: s 
									}); 
								} else t.setData({ 
									page: a.page - 1 
								}); 
							} 
							e.code; 
						}, 
						complete: function() { 
							t.setData({ 
								is_loading: !1 
							}), t.hideLoadingMoreBar(); 
						} 
					}); 
			}, 
			showLoadingBar: function() { 
				this.setData({ 
					loading_class: "active" 
				}); 
			}, 
			hideLoadingBar: function() { 
				this.setData({ 
					loading_class: "" 
				}); 
			}, 
			showLoadingMoreBar: function() { 
				this.setData({ 
					loading_more_active: "active" 
				}); 
			}, 
			hideLoadingMoreBar: function() { 
				this.setData({ 
					loading_more_active: "" 
				}); 
			}, 
			deleteSearchHistory: function() { 
				this.setData({ 
					history_list: null 
				}), myVue.getApp.core.removeStorageSync(myVue.getApp.const.SEARCH_HISTORY_LIST); 
			} 
		} 
	} 
</script> 
 
<style scoped> 
	form { 
		padding: 16upx 24upx; 
		display: block; 
	} 
 
	.search-box { 
		display: flex; 
		flex-direction: row; 
	} 
 
	.search-box view { 
		flex-grow: 1; 
		align-items: center; 
	} 
 
	.search-box view:last-child { 
		flex-grow: 0; 
	} 
 
	.cat { 
		font-size: 11pt; 
		margin: 0 10upx 0 24upx; 
	} 
 
	.pull-down { 
		width: 124upx; 
	} 
 
	.pull-down-list { 
		background-color: #fff; 
		position: absolute; 
		top: 80upx; 
		width: 150upx; 
		border: 1px solid #e3e3e3; 
		border-radius: 15upx; 
		z-index: 999; 
	} 
 
	.pull-down-text { 
		font-size: 11pt; 
		height: 88upx; 
		border-bottom: 1px solid #e3e3e3; 
	} 
 
	.active { 
		color: #ff5c5c; 
	} 
 
	.input-box { 
		display: flex; 
		flex-direction: row; 
		background: #fff; 
		border: 1upx solid #e3e3e3; 
		height: 64upx; 
		border-radius: 10upx; 
	} 
 
	.input-box view { 
		flex-grow: 1 !important; 
		align-items: center; 
	} 
 
	.input-box view:first-child { 
		flex-grow: 0; 
	} 
 
	.search-box .search-icon { 
		height: 24upx; 
		width: 24upx; 
	} 
 
	.search-box .search-cancel { 
		display: inline-block; 
		height: 64upx; 
		line-height: 68upx; 
		color: #00c203; 
		white-space: nowrap; 
		padding: 0 24upx; 
		margin-right: -24upx; 
	} 
 
	.search-history { 
		padding: 24upx 34upx; 
	} 
 
	.search-history .search-history-title { 
		color: #666666; 
	} 
 
	.search-history .delete-search-history { 
		float: right; 
		padding: 15upx 20upx; 
		margin-top: -15upx; 
	} 
 
	.search-history-list { 
		padding: 24upx 0 0 0; 
	} 
 
	.search-history-list .search-history-item { 
		display: inline-block; 
		height: 64upx; 
		line-height: 64upx; 
		padding: 0 32upx; 
		margin: 0 20upx 20upx 0; 
		background: #ddd; 
		border-radius: 10upx; 
	} 
 
	.loading-bar { 
		text-align: center; 
		padding: 0; 
		visibility: hidden; 
		height: 0; 
	} 
 
	.loading-bar.active { 
		visibility: visible; 
		height: auto; 
		padding: 20upx; 
	} 
 
	.goods-list { 
		margin-left: -10upx; 
		margin-right: -10upx; 
	} 
 
	.goods-item { 
		width: 365upx; 
		display: inline-block; 
		position: relative; 
		margin: 0 10upx; 
		margin-bottom: 20upx; 
		font-size: 0; 
		background: #fff; 
	} 
 
	.goods-item .goods-pic { 
		width: 100%; 
		height: 365upx; 
	} 
 
	.goods-item .goods-info { 
		padding: 5upx 0; 
	} 
 
	.goods-item .goods-name { 
		white-space: nowrap; 
		text-overflow: ellipsis; 
		overflow: hidden; 
		padding: 10upx; 
		font-size: 11pt; 
		display: block; 
		text-align: center; 
	} 
 
	.goods-item .goods-price { 
		font-size: 11pt; 
		color: #f40; 
		display: block; 
		text-align: center; 
	} 
 
	.loading-more-bar { 
		text-align: center; 
		margin-bottom: 20upx; 
		opacity: 0; 
	} 
 
	.loading-more-bar.active { 
		opacity: 1; 
	} 
</style> 
